<template>
	<div>
		<div class="wy_filter">
			<el-input v-model="query.name" placeholder="请输入要查询的订单编号"></el-input>
			<el-button type="primary" plain icon="el-icon-search" @click="search">查询</el-button>
			<div class="clear"></div>
		</div>
		<el-table
		  :data="orders.records"
		  stripe
		  border>
		  <el-table-column label="订单编号" prop="orderNo" width="200px" align="center"></el-table-column>
		  <el-table-column label="下单用户"  align="center">
			  <template slot-scope="scope">
			  				  <template v-for="item in form.userAll">
			  					  <span v-if="item.id === scope.row.userId">{{item.nickyName}}</span>
			  				  </template>
			  </template>
		  </el-table-column>
		  <el-table-column label="下单时间" prop="createTime" width="200px" align="center">
			  <template slot-scope="scope">
			  				  <span>{{scope.row.createTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
			  </template>
		  </el-table-column>
		  <el-table-column label="订单状态" align="center" width="120px">
			  <template slot-scope="scope">
				  <template v-for="item in form.orderStatusAll">
					  <span v-if="item.orderStatus === scope.row.orderStatus">{{item.statusName}}</span>
				  </template>
			  </template>
		  </el-table-column>
		  <el-table-column label="订单总价" prop="totalPrice" width="120px" align="center"></el-table-column>
		  <el-table-column label="支付状态" align="center" width="120px">
		  			  <template slot-scope="scope">
		  				  <template v-for="item in form.payStatusAll">
		  					  <span v-if="item.payStatus === scope.row.payStatus">{{item.statusName}}</span>
		  				  </template>
		  			  </template>
		  </el-table-column>
		  <el-table-column label="支付时间" prop="payTime" width="200px" align="center">
			  <template slot-scope="scope">
			  				  <span>{{scope.row.payTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
			  </template>
		  </el-table-column>
		  <el-table-column label="操作" width="200px" align="center">
		  			  <template slot-scope="scope">
		  					<el-button type="primary" plain @click="give(scope.row.id,2)" size="small">订单发货</el-button>
		  					<el-button type="danger" plain @click="back(scope.row.id,-3)" size="small">订单退回</el-button>
		  			  </template>
		  </el-table-column>
		  
		  </el-table>
		  
		  <el-pagination
		    background
			:current-page.sync="query.pageNo"
		    layout="prev, pager, next"
		    :page-count="orders.pages"
			@current-change="getTableData()">
		  </el-pagination>
		  
	</div>
</template>

<script>
	import { Message ,Notification, Loading} from 'element-ui'
	export default {
		name: "GiveProductList",
		data() {
			const module = '/order-status'
			return {
				url: {
					list: module + '/list',
					back: module + '/back',
					give: module + '/give'
				},
				query: {
					pageNo: 1,
					pageSize: 8,
					name: ''
				},
				form: {
					orderStatusAll: [],
					userAll: [],
					payStatusAll: []
				},
				orders: []
			}
		},
		created() {
			this.getTableData()
		},
		mounted() {
			
		},
		methods: {
			getTableData() {
				this.get(this.url.list,this.query,response => {
					console.log(response)
					this.orders = response.order
					this.form.orderStatusAll = response.status
					this.form.userAll = response.user
					this.form.payStatusAll = response.pay
					
				})
			},
			search() {
				this.query.pageNo = 1
				this.getTableData()
			},
			
			back(id,orderStatus) {
				this.$confirm("您确定要将该订单退回吗？",'提示', {type: 'warning'}).then(() => {
					//点击确定按键
					this.post(this.url.back,{id: id, orderStatus: orderStatus},() => {
					this.getTableData()
					})
				}).catch(() => {
					//点击取消按键
				})
				
			},
			
			give(id,orderStatus) {
				this.$confirm("您确定要进行发货操作吗？",'提示', {type: 'warning'}).then(() => {
					//点击确定按键
					this.post(this.url.give,{id: id, orderStatus: orderStatus},() => {
					this.getTableData()
					})
				}).catch(() => {
					//点击取消按键
				})
				
			},
			
		}
	}
</script>

<style>
</style>
